import React, { Component } from "react";

// 当一个组件作为路由的页面的时候，会在props里面有关于路由的信息
// 如果要做动态路由传参的，和vue里面一模一样，也是添加 /:id
import { Link, Route, Switch } from "react-router-dom";

class Home extends Component {
  render() {
    return <div>这是home页面</div>;
  }
}
class About extends Component {
  render() {
    return <div>这是about页面</div>;
  }
}
class Detail extends Component {
  render() {
    // console.log(this.props.match.params.id);

    // const {
    //   params: { id },
    // } = this.props.match;

    const { id } = this.props?.match?.params;
    return <div>这是detail页面 - {id}</div>;
  }
}

class App extends Component {
  state = {};
  render() {
    return (
      <>
        <h2>动态路由传参</h2>
        <ul>
          <li>
            <Link to="/home">首页</Link>
          </li>
          <li>
            <Link to="/about">关于页</Link>
          </li>
          <li>
            <Link to="/detail/123">详情页</Link>
          </li>
          <li>
            <Link to="/detail/456">详情页</Link>
          </li>
        </ul>

        <hr />

        <Switch>
          <Route path="/home" component={Home}></Route>
          <Route path="/about" component={About}></Route>
          <Route path="/detail/:id" component={Detail}></Route>
        </Switch>
      </>
    );
  }
}

export default App;
